<template>
  <el-card class="box-card">
    <!-- <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <!-- 公司通告 新闻 -->
    <div v-if="activeName!='dept'" style="color: #666;position: absolute;top: 27px;right: 10px;z-index: 6;cursor: pointer;" @click="more"> 更多>> </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="红头文件" name="first"></el-tab-pane>
      <el-tab-pane label="最新知识库" name="second"></el-tab-pane>
    </el-tabs>
    <div v-if="list.length != 0" class="content">
      <div v-for="iten in list" class="item" @click="handleDetail(iten)">
        <div class="left">{{ iten.fileName || iten.docTitle }}</div>
        <div class="right">
          {{ parseTime(iten.createTime, "{y}-{m}-{d}") || "--" }}
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <!--部门数据-->
      <el-table ref="userTable" height="500" :data="list" highlight-current-row
       >
        <el-table-column label="标题" align="center" prop="nickName">
          <template slot-scope="scope"  >
            <div style="cursor:pointer;" @click="handleDetail(scope.row)">
              <el-link type="primary">{{  scope.row.fileName || scope.row.docTitle}}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时间" align="center" prop="phonenumber" >
          <template slot-scope="scope">
            {{  parseTime(scope.row.createTime, "{y}-{m}-{d}") || "--"}}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-if="activeName=='first'" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
        <pagination v-else :total="total" :page.sync="queryParams1.pageNum" :limit.sync="queryParams1.pageSize"
        @pagination="getDocList" />
    </el-dialog>

    <el-empty v-if="list.length == 0" :image-size="50"></el-empty>
    <!-- <el-form-item label="" prop="fileUrl"> -->
    <!-- <FileUpload :isDelete="false" v-model="formData.fileUrl"></FileUpload> -->
    <!-- </el-form-item> -->
    <detail :detailOPen.sync="detailOPen" :rowDetail="rowDetail" @cancel="cancel"></detail>
    <!-- <FileUpload :isDelete="false" v-model="formData.fileUrl"></FileUpload> -->
    <!-- <DetailNotice ref="Detail" :id="id"></DetailNotice> -->
  </el-card>
</template>
<script>
import { listNotice } from "@/api/system/notice";
import { docList, docDel, docEdit, docAdd } from "@/api/company/doc.js";
import detail from "@/views/company/knowledge/detail.vue";
import { listFileManager, delFileManager } from "@/api/system/fileManager.js";
import DetailNotice from "@/views/system/file/detail.vue";

export default {
  name: "leftOne",
  components: {
    detail,
    DetailNotice,
  },
  data() {
    return {
      detailOPen: false,
      rowDetail: {},
      title:'',
      open: false,
            total: 0,
      activeName: "first",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        fileTypeValue: 3,
        indexShow: 1,
      },
      queryParams1:{
        pageNum: 1,
        pageSize: 10,
      },
      list: [],
      baseUrl: this.$VUE_APP_IMG_API,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    cancel() {
      this.detailOPen = false;
    },
    more(){
      this.open = true
      this.title = this.activeName == "first"? '红头文件' : this.activeName == "second"? '最新知识库' :'';
    },
    handleClick(e) {
      if (this.activeName == "first") {
        this.queryParams.busType = 3;
        this.getList();
      } else if (this.activeName == "second") {
        this.queryParams.busType = 1;
        this.getDocList();
      }
    },
    handleDetail(e) {
      console.log(e);
      // return
      if (e.fileTypeValue) {
        console.log('+++++++++++++++++++>');
        window.open(this.baseUrl + e.fileUrl)
        // this.handleDetailDiag(e);
      } else if (e.busType == -1) {
        console.log(',.,,.,.,.,.');
        this.detailOPen = true;
        this.rowDetail = e;
        // this.$router.push("/company/knowledge?id=" + e.klgDocId);
      }
    },
    /** 查询公告列表 */
    getList() {
      listFileManager(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total;
      });
    },
    handleDetailDiag(e) {
      this.$refs.Detail.show(e.fileManagerId);
    },
    /** 查询列表 */
    getDocList() {
      docList(this.queryParams1).then((response) => {
        this.list = response.rows;
        this.total = response.total;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  height: 250px;
  position: relative;
}
.content{
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 添加滚动条 */
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 5px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  &:not(:last-child) {
    border-bottom: 1px solid #dfe4ed;
  }

  &:last-child {
    padding-bottom: 0;
    // border-bottom: 1px solid #dfe4ed;
  }

  >.left {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
